<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>统计数据</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset" style="border-radius: 50px;">
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">培训时间</label>
              <div class="layui-input-inline">
                <input type="text" id="date" name="date" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">讲师</label>
              <div class="layui-input-inline">
                <input type="text" name="teacher" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">培训标签</label>
              <div class="layui-input-inline">
                <select name="type" lay-filter="aihao">
                  <option value="">请选择岗位类别</option>
                  <option value="1">安全体系类</option>
                  <option value="2">生产技能类</option>
                  <option value="3">人员管理类</option>
                  <option value="4">职业素质类</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
              <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon"></i> 重 置</button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>
    <div class="layui-row">
      <div class="layui-col-md12">
        <div class="layui-card-body">
          <!--图表一和图表二-->
          <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
              <div class="layui-card" style="box-shadow: 0px 0px 10px 3px gainsboro; border-radius: 20px;">
                <div class="layui-card-header" style="font-weight: bold; font-size: 18px;"><i class="fa fa-pie-chart"></i>&nbsp;&nbsp;各类课程人数统计</div>
                <div class="layui-card-body">
                  <div id="main" style="width: 100%; height: 400px;"></div>
                </div>
              </div>
            </div>
            <div class="layui-col-md6">
              <div class="layui-card" style="border-radius: 20px; border: 2px solid buttonface; box-shadow: 0px 0px 10px 3px gainsboro;">
                <div class="layui-card-header" style="font-weight: bold; font-size: 18px;"><i class="fa fa-pie-chart"></i>讲师课时统计</div>
                <div class="layui-card-body">
                  <div id="main1" style="width: 100%; height: 400px;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="padding:20px;">
    <!--图表三-->
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12 ">
        <div class="layui-card-body">
          <div class="layui-card" style="box-shadow: 0px 0px 10px 3px gainsboro; border-radius: 20px;">
            <div class="layui-card-header" style="font-weight: bold; font-size: 18px;"><i class="	fa fa-line-chart"></i>近三年培训人数统计情况</div>
            <div class="layui-card-body">
              <div id="main2" style="width: 100%; height: 600px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  </div>
</div>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
  layui.use(['form', 'table','laydate','echarts'], function () {
    var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate,
            echarts=layui.echarts;
    laydate.render({
      elem: '#date'
    })
    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      var result = JSON.stringify(data.field);
      layer.alert(result, {
        title: '最终的搜索信息'
      });
      return false;
    });
    /**
     * 报表功能
     */
    var echartsRecords = echarts.init(document.getElementById('main'), 'walden');

    var optionRecords = {
      title: {
        text: '根据各类课程人数统计',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '安全体系类' },
            { value: 735, name: '生产技能类' },
            { value: 580, name: '人员管理类' },
            { value: 484, name: '职业素质类' },
            { value: 300, name: '其它' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    echartsRecords.setOption(optionRecords);

    /* 柱状图 */
    var main1Records = echarts.init(document.getElementById('main1'), 'walden');

    var optionMain1 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['张老师', '李老师', '王老师', '圣老师', '吴老师']
      },
      series: [
        {
          name: '2019',
          type: 'bar',
          data: [18203, 23489, 29034, 104970, 131744]
        },
        {
          name: '2020',
          type: 'bar',
          data: [19325, 23438, 31000, 121594, 134141]
        }
      ]
    };

    main1Records.setOption(optionMain1);

  });
</script>

</body>
</html>